<div>
    <div class="title-info">
        <h4 class="app-title">
            <span @click="hide">
                <i class="icon-left back"></i>
            </span>
            {{deviceInfo.name}}
        </h4>
        <span @click="save" class="right-top save-info"><i class="icon-checkmark-round"></i></span>
    </div>
    <div class="selected-radio flex flex-ac flex-jcb">
        <div>{{$t('selectDevice')}}({{selected}}/{{count}})</div>
        <div @click="selectAllDevice($event)" class="select-small-radio flex flex-ac flex-jce"><span  class="span-radio"
                   :class="{'active': (selected == count && selected != 0)}"><span></span></span></div>
    </div>
    <div class="content-info attr flex-wrapper" :id="autoIdAll">
        <div class="overflow-touch overflow-wrapper">
            <div @click="selectMac(item.mac)" v-if="showCondition(item.mac, item.tid)" v-for="item in deviceList" class="item">
                <div class="item-icon-circle">
                    <i class="icon-light"></i>
                </div>
                <div class="item-name">
                    <span>{{getPosition(item.position)}}</span>
                    <span :class="{'desc': showDesc(item.position)}">{{item.name}}
                        <span v-show="showDesc(item.position)">({{item.version}})</span></span>
                    <span class="desc" v-show="!showDesc(item.position)">{{item.version}}</span>
                </div>
                <div class="item-power-small">
                    <span :data-value="item.mac" class="span-radio" :class="{'active': isSelected(item.mac)}"><span></span></span>
                </div>
            </div>
        </div>

    </div>
</div>
